Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update giscus.ejs to fix giscus color on load #11047

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

kv9898
Copy link

@kv9898 kv9898 commented Oct 13, 2024

Fixes #8613.

An async while loop check is added to wait for the quarto-light/quarto-dark body class to load up. The giscus element is then created in the according theme.

The effect:
Before change (using #8613's example):

  1. Go to https://ibis-project.org/posts/kedro-ibis/ (light mode giscus loaded)
  2. Toggle to dark mode (dark mode giscus loaded)
  3. Refresh. Page is in dark mode but giscus is in light mode (bug)

After change:

  1. Go to https://rubuky.com/papers/2023-11-30-FemaleOfficer/ (light mode giscus loaded)
  2. Toggle to dark mode (dark mode giscus loaded)
  3. Refresh. Both page and giscus are in dark mode (desired outcome)

@kv9898
Copy link
Author

kv9898 commented Oct 15, 2024

@cderv I got no response from the original issue authors. Since my changes are minimal, I think they are compatible with the rest of Quarto and ready to be merged. Please let me know if there are other things I need to do.

PS: I signed a contribution agreement when I contributed to Positron, I think it also works for Quarto that I don't need to sign anything else?

@cscheid
Copy link
Collaborator

cscheid commented Oct 18, 2024

Thanks for the PR.

I don't love an unbounded timeout loop; if something goes wrong we'll have something waking up the process at every 50ms, and that doesn't seem like a good idea.

What if we used a MutationObserver instead? We already use this in other parts of the Quarto codebase. Good docs here: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

@kv9898
Copy link
Author

kv9898 commented Oct 18, 2024

@cscheid Just switched to MutationObserver, is the current version better?

@cscheid
Copy link
Collaborator

cscheid commented Oct 18, 2024

Yes, I think so, thanks!

Other things we need to think about:

  • how do we test this to avoid future regressions? We have some playwright tests on tests/integration/playwright that are controlled by tests/integration/playwright-tests.test.ts, but I'm not sure how easy it is to set those up with the giscus dependencies
  • we need to check that the behavior stays correct for themes that lack light-dark
  • You need to sign a contributor agreement with Posit: https://github.com/quarto-dev/quarto-cli/blob/main/CONTRIBUTING.md

@kv9898
Copy link
Author

kv9898 commented Oct 18, 2024

Yes, I think so, thanks!

Other things we need to think about:

  • how do we test this to avoid future regressions? We have some playwright.test.ts tests, but I'm not sure how easy it is to set those up with the giscus dependencies
  • we need to check that the behavior stays correct for themes that lack light-dark
  • You need to sign a contributor agreement with Posit: https://github.com/quarto-dev/quarto-cli/blob/main/CONTRIBUTING.md

As for the contributor agreement, I have signed it with Posit when I contributed to posit-dev/ark. I think it also works for Quarto?

As for websites without dark themes, I have browsed some websites without a dark theme in the Quarto gallery (e.g. https://nasa-openscapes.github.io/). It seems that for these websites, there is also a quarto-light class, which is sufficient for the mutation observer. The giscus is then set to giscus-base-theme if quart-dark is not detected. So in theory, this should work.

I'm not sure about how to avoid future regressions, either. I'm pretty new to TypeScript/JavaScript as you probably realised.

@cscheid
Copy link
Collaborator

cscheid commented Oct 18, 2024

As for the contributor agreement, I have signed it with Posit when I contributed to posit-dev/ark. I think it also works for Quarto?

It does, thanks!

@cscheid
Copy link
Collaborator

cscheid commented Oct 18, 2024

@cderv, asking for a review here specifically for guidance/idea around playwright.

@cscheid cscheid requested a review from cderv October 18, 2024 17:27
@cderv cderv self-assigned this Oct 18, 2024
@cderv
Copy link
Collaborator

cderv commented Oct 21, 2024

I think we can indeed test this using our playwright testings. We just need to come up with an example website that has the issue, and for which this PR fixes it. Though, we also need to have a dummy giscus set up 🤔 - I'll look into this. @kv9898 I can handle adding the test and I'll probably push in your PR before merging

@cscheid
Copy link
Collaborator

cscheid commented Oct 21, 2024

Though, we also need to have a dummy giscus set up 🤔 - I'll look into this.

Let's talk about this when you know more. As we start to become more diligent about integration tests, this kind of issue will come up more often.

@cscheid cscheid added this to the v1.7 milestone Nov 18, 2024
@cscheid cscheid added the early-in-release An issue that should be worked on early in the release (likely due to risk) label Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
early-in-release An issue that should be worked on early in the release (likely due to risk)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Giscus comments on quarto are initially rendered in light mode even when the dark mode switch is on
3 participants